// moyv-components/popup/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 是否显示弹窗
    show: {
      type: Boolean,
      value: false,
      observer(newVal, oldVal) {
        newVal ? this.openPopup() : this.closePopup();
      }
    },
    // 弹出位置
    position: {
      type: String,
      value: "center"
    },
    // 弹窗层级
    zIndex: {
      type: String,
      value: "1080"
    },
    // 是否为 iPhone全面屏手机 留出底部安全距离
    safeAreaInsetBottom: {
      type: Boolean,
      value: true
    },
    // 弹窗自定义样式
    popupStyle: {
      type: String,
      value: ""
    },
    // 遮罩层自定义样式
    maskStyle: {
      type: String,
      value: ""
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    popupShow: false,
    popupOpen: false
  },
  /**
   * 组件的生命周期方法
   */
  lifetimes: {
    ready: function () {
      this.isAnimating = false; // 是否动画中
      this.domCreateTimer = null; // 定时器
      this.animationTimer = null; // 定时器
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    // 打开弹窗
    openPopup() {
      if (this.isAnimating) {
        this.clearTimer();
        this.setData({
          popupOpen: false,
          popupShow: false
        });
      }
      this.isAnimating = true;
      this.setData({ popupShow: true });
      this.domCreateTimer = setTimeout(() => {
        this.setData({ popupOpen: true });
      }, 50);
      this.animationTimer = setTimeout(() => {
        this.isAnimating = false;
      }, 350);
    },
    // 关闭弹窗
    closePopup() {
      if (this.isAnimating) {
        this.clearTimer();
        this.setData({
          popupOpen: true,
          popupShow: true
        });
      }
      this.isAnimating = true;
      this.setData({ popupOpen: false });
      this.animationTimer = setTimeout(() => {
        this.isAnimating = false;
        this.setData({ popupShow: false });
      }, 300);
    },
    // 遮罩层点击
    onMaskClick() {
      this.triggerEvent('click-mask', {}, {})
    },
    // 清除定时器
    clearTimer() {
      clearTimeout(this.domCreateTimer);
      clearTimeout(this.animationTimer);
    }
  }
})
